<template>
    <div class="app-container">
        <el-form :inline="true" ref="queryForm">
            <el-form-item label="请假类型">
                <el-select v-model="queryParams.type" placeholder="请选择请假类型" clearable size="small">
                    <el-option
                            v-for="dict in typeOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="申请人姓名">
                <el-input
                        v-model="queryParams.applyName"
                        placeholder="请输入申请人姓名"
                        clearable
                        size="small"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" border :data="todoLeaveList">
            <el-table-column label="序号" type="index" width="60"/>
            <el-table-column label="主题" prop="title" :show-overflow-tooltip="true"/>
            <el-table-column label="假单类型" prop="type" width="80"/>
            <el-table-column label="申请人" prop="applyName" />
            <el-table-column label="申请时间" align="center" prop="applyTime" width="160">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.applyTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态"  align="center" prop="status" />
            <el-table-column label="当前任务"  align="center" prop="taskName" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            v-if="scope.row.status=='审批中'"
                            v-hasPermi="['hr:leave:approvalLeave']"
                            @click="handleApproval(scope.row)"
                    >审批
                    </el-button>
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-circle-check"
                            v-if="scope.row.status=='已驳回'"
                            @click="handleModifyLeave(scope.row)"
                            v-hasPermi="['hr:leave:modifyAndApplyLeave']"
                    >调整假单
                    </el-button>
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            v-if="scope.row.status=='已驳回'"
                            v-hasPermi="['hr:leave:giveUpLeave']"
                            @click="handleGiveUp(scope.row)"
                    >放弃
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 请假单审批信息对话框 -->
        <el-dialog :title="title" :visible.sync="open" :show-close="false" width="650px" append-to-body>
            <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="主题信息" prop="title">
                            <el-input v-model="formData.title" placeholder="请输入请假主题信息" show-word-limit readonly
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="请假类型" prop="type">
                            <el-input v-model="formData.type" show-word-limit readonly
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="时间范围" prop="dateTimeRange">
                            <el-date-picker
                                    v-model="formData.dateTimeRange"
                                    type="datetimerange"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    readonly
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="总时长" prop="totalTime">
                            <el-input v-model="formData.totalTimeStr" show-word-limit readonly :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="请假原因" prop="reason">
                            <el-input v-model="formData.reason" type="textarea" readonly placeholder="请输入请假原因"
                                      show-word-limit
                                      :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="审批" prop="approval">
                            <el-radio-group v-model="formData.approval" size="medium">
                                <el-radio  label="同意">同意</el-radio>
                                <el-radio  label="驳回">驳回</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="批注" prop="approvalComment">
                            <el-input v-model="formData.approvalComment" type="textarea" placeholder="请输入审批意见"
                                      show-word-limit
                                      :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitApproval">提交</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

        <!--请假单修改对话框-->
        <el-dialog :title="modifyTitle" :visible.sync="modifyOpen" :show-close="false" width="650px" append-to-body>
            <el-form ref="modifyForm" :model="formData" :rules="modifyRules" size="medium" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="主题信息" prop="title">
                            <el-input v-model="formData.title" placeholder="请输入请假主题信息" show-word-limit
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="请假类型" prop="type">
                            <el-select v-model="formData.type" placeholder="请选择请假类型" clearable size="small">
                                <el-option
                                        v-for="dict in typeOptions"
                                        :key="dict.dictValue"
                                        :label="dict.dictLabel"
                                        :value="dict.dictValue"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="时间范围" prop="dateTimeRange">
                            <el-date-picker
                                    v-model="formData.dateTimeRange"
                                    type="datetimerange"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    @input="dateTimeChange"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="总时长" prop="totalTime">
                            <el-input v-model="formData.totalTimeStr" show-word-limit readonly :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="请假原因" prop="reason">
                            <el-input v-model="formData.reason" type="textarea" placeholder="请输入请假原因"
                                      show-word-limit
                                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="modifyAndApplyLeave">发起申请</el-button>
                <el-button type="primary" @click="modifyLeave">保存为草稿</el-button>
                <el-button @click="modifyCancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {listTodoLeave,approvalLeave,giveUpLeave,modifyLeave,modifyAndApplyLeave} from "@/api/hr/leave.js";

    export default {
        name: "todoList",
        components: {},
        data() {
            return {
                // 查询参数
                queryParams: {
                    type: undefined,
                    applyName: undefined
                },
                // 请假类型数据字典
                typeOptions: [],
                // 公司数据
                todoLeaveList: [],
                // 遮罩层
                loading: true,
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                modifyTitle: "",
                modifyOpen: false,
                // 表单参数
                formData: {
                    leaveId: undefined,
                    title: undefined,
                    type: undefined,
                    leaveStartTime: undefined,
                    leaveEndTime: undefined,
                    totalTime: undefined,
                    totalTimeStr: undefined,
                    dateTimeRange: undefined,
                    reason: undefined,
                    approval: "同意",
                    approvalComment: ""
                },
                // 表单校验
                rules: {
                    approvalComment: [{
                        required: true,
                        message: '审批意见不能为空',
                        trigger: 'blur'
                    }]
                },
                /*修改表单校验*/
                modifyRules: {
                    title: [{
                        required: true,
                        message: '请假主题信息不能为空',
                        trigger: 'blur'
                    }],
                    type: [{
                        required: true,
                        message: '请假类型不能为空',
                        trigger: 'change'
                    }],
                    dateTimeRange: [{
                        required: true,
                        message: '时间范围不能为空',
                        trigger: 'blur'
                    }],
                    reason: [{
                        required: true,
                        message: '请假原因不能为空',
                        trigger: 'blur'
                    }]
                }
            };
        },
        created() {
            this.getList();
            this.getDicts("hr_leave_type").then(response => {
                this.typeOptions = response.data;
            });
        },
        methods: {
            /** 查询假单待办列表 */
            getList() {
                this.loading = true;
                listTodoLeave(this.queryParams).then(
                    response => {
                        this.todoLeaveList = response.data;
                        this.loading = false;
                    }
                );
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.$refs['queryForm'].resetFields();
                this.getList();
            },
            /** 审批按钮操作 */
            handleApproval(row) {
                //添加其他数据
                //将列表中的选中对象信息拷贝到修改界面的对象中去,assign方法很重要，防止取消之后影响分页表格数据
                this.formData = Object.assign({}, row);
                this.$set(this.formData, "dateTimeRange", [row.leaveStartTime,row.leaveEndTime]);
                this.formData.totalTimeStr = this.getDuration(this.formData.totalTime);
                //默认同意
                this.$set(this.formData, "approval", "同意");
                this.open = true;
                this.title = "假单审批-" + row.taskName;
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.formData = {
                    leaveId: undefined,
                    title: undefined,
                    type: undefined,
                    leaveStartTime: undefined,
                    leaveEndTime: undefined,
                    totalTime: undefined,
                    totalTimeStr: undefined,
                    dateTimeRange: undefined,
                    reason: undefined,
                    approval: "同意",
                    approvalComment: ""
                };
                this.$refs['elForm'].resetFields();
            },
            /** 提交审批 */
            submitApproval: function () {
                this.$refs["elForm"].validate(valid => {
                    if (valid) {
                        //添加
                        approvalLeave(this.formData).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess("假单审批成功！");
                                this.getList();
                                this.open = false;
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    }
                });
            },
            /** 时间范围选定后的回调函数*/
            dateTimeChange(dateTimeRange){
                this.$set(this.formData, "dateTimeRange",dateTimeRange);
                //选定时间后，计算时间差，并将数据放入到表单对象中去
                if(dateTimeRange != null && dateTimeRange.length>0){
                    this.formData.leaveStartTime = dateTimeRange[0];
                    this.formData.leaveEndTime = dateTimeRange[1];
                    this.formData.totalTime = this.stringToDate(dateTimeRange[1]) -  this.stringToDate(dateTimeRange[0]);
                    this.formData.totalTimeStr = this.getDuration(this.formData.totalTime);
                }
            },
            /** 调整假单并发起请假申请操作 */
            handleModifyLeave(row) {
                //添加其他数据
                //将列表中的选中对象信息拷贝到修改界面的对象中去,assign方法很重要，防止取消之后影响分页表格数据
                this.formData = Object.assign({}, row);
                this.$set(this.formData, "dateTimeRange", [row.leaveStartTime,row.leaveEndTime]);
                this.formData.totalTimeStr = this.getDuration(this.formData.totalTime);
                this.modifyOpen = true;
                this.modifyTitle = "修改请假信息";
            },
            modifyAndApplyLeave(){
                let app = this;
                app.$refs["modifyForm"].validate(valid => {
                    if (valid) {
                        app.$confirm('确定重新发起请假申请吗？', "警告", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning"
                        }).then(function () {
                            modifyAndApplyLeave(app.formData).then(response => {
                                if (response.code === 200) {
                                    app.msgSuccess("请假单发起成功，请耐心等待领导审批！");
                                    app.getList();
                                    app.modifyOpen = false;
                                } else {
                                    app.msgError(response.msg);
                                }
                            });
                        });
                    }
                });
            },
            modifyLeave(){
                modifyLeave(this.formData).then(response => {
                    if (response.code === 200) {
                        this.msgSuccess("请假草稿修改成功！");
                        this.getList();
                        this.modifyOpen = false;
                    } else {
                        this.msgError(response.msg);
                    }
                });
            },
            modifyCancel(){
                this.modifyOpen = false;
                this.formData = {
                    leaveId: undefined,
                    title: undefined,
                    type: undefined,
                    leaveStartTime: undefined,
                    leaveEndTime: undefined,
                    totalTime: undefined,
                    totalTimeStr: undefined,
                    dateTimeRange: undefined,
                    reason: undefined,
                    approval: "同意",
                    approvalComment: ""
                };
                this.$refs['modifyForm'].resetFields();
            },
            handleGiveUp(row){
                let app = this;
                app.$confirm('确定放弃本次请假申请吗？', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    giveUpLeave(row).then(response => {
                        if (response.code === 200) {
                            app.msgSuccess("请假单放弃成功！");
                            app.getList();
                            app.open = false;
                        } else {
                            app.msgError(response.msg);
                        }
                    });
                });
            }
        }
    };
</script>
